<template>
  <div class="content-box">
    <el-row>
      <el-col :span="16">
        <e-heading class="no-margin" :grade="'1'">战术板</e-heading>
      </el-col>
      <el-col :span="8" style="text-align:right;">
        <el-button type="primary" @click="dialogVisible = true">
          新建战术板
        </el-button>
      </el-col>
    </el-row>

    <div style="margin: 20px 0;">
      <el-select placeholder="请选择运动类型" v-model="sportType">
        <el-option
          v-for="item in sportList"
          :key="item.fieldName"
          :label="item.fieldName"
          :value="item.fieldValue">
        </el-option>
      </el-select>
      <el-select placeholder="请选择战术板类型" v-model="tacticTypeId">
        <el-option 
          v-for="item in tacticsType"
          :key="item.fieldName"
          :label="item.fieldName"
          :value="item.fieldValue">
        </el-option>
      </el-select>
      <el-select placeholder="请选择战术板" v-model="tacticId">
        <el-option 
          v-for="item in tacticsList"
          :key="item.key"
          :label="item.value"
          :value="item.key">
        </el-option>
      </el-select>
      <el-button v-if="tacticId" @click="deleteBorad()">删除
      </el-button>    
    </div>

    <el-tabs v-if="showTabs"
      v-model="activeTab" 
      @tab-click="handleClick">
      <el-tab-pane label="详情" name="details">
          <Details :currentTab="activeTab"/>
      </el-tab-pane>
      <el-tab-pane label="编辑" name="edit">
          <Edit  
            :sportType="sportType" 
            :currentTab="activeTab"
            :tacticTypeId="tacticTypeId"
            :tacticId="tacticId" />
      </el-tab-pane>
      <el-tab-pane label="描述" name="description">
          <Description 
            :sportType="sportType" 
            :currentTab="activeTab"
            :tacticTypeId="tacticTypeId"
            :tacticId="tacticId" />
      </el-tab-pane>
      <el-tab-pane label="计划" name="plan">
          <Plan 
            :sportType="sportType" 
            :tacticTypeId="tacticTypeId"
            :tacticId="tacticId" />
      </el-tab-pane>
    </el-tabs>

    <e-placeholder text="暂无战术板信息" src="/static/images/empty_default.png" v-show="!showTabs">
    </e-placeholder>

    <el-dialog
      :visible.sync="dialogVisible"
      title="新建战术板"
      @close="dialogVisible = false"
      @open="clearValid">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="运动类型：" prop="sportType"
          :rules="[{ required: true, message: '请选择类型'}
          ]">
          <el-select v-model="form.sportType">
            <el-option 
              v-for="item in sportList"
              :key="item.fieldName"
              :label="item.fieldName"
              :value="item.fieldValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="战术板类型：" prop="tacticTypeId"
          :rules="[
            { required: true, message: '请选择战术板类型'}
          ]">
          <el-select v-model="form.tacticTypeId">
            <el-option 
              v-for="item in tacticsType"
              :key="item.fieldName"
              :label="item.fieldName"
              :value="item.fieldValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="tacticName"
          :rules="[
            { required: true, message: '请输入名称'}
          ]">
          <el-input v-model="form.tacticName"   /> 
        </el-form-item>
        <el-form-item label="场地地形：" prop="type" class="terrain"
          :rules="[
            { required: true, message: '请选择场地地形'}
          ]">
          <el-row>
            <el-col :span="8" v-for="(item,index) in boardUrl" :key="item.url">
              <img  :src="item.url" 
                :class="item.checked ? 'board-active': ''"
                @click="checkThis(index)">
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取  消</el-button>
        <el-button type="primary" @click="save()">保  存</el-button>
      </span> 
    </el-dialog>


  </div>
</template>
<script>
import Description from './Description'
import Details from './Details'
import Edit from './Edit'
import Plan from './Plan'
import api from 'api/tactics'
export default{
  components: {
    Description,
    Details,
    Edit,
    Plan
  },
  computed: {
    // 战术板类型列表
    tacticsType () {
      return this.$store.getters.tactics_type_list
    },
    // 战术板列表
    tacticsList () {
      return this.$store.getters.tactics_list
    },
    tacticsInfo () {
      return this.$store.getters.tactics_info
    }
  },
  watch: {
    sportType (val, oldVal) {
      this.$store.dispatch('tactics_type_list', {
        fieldValue: val
      })
    },
    tacticTypeId (val, oldVal) {
      this.$store.dispatch('tactics_list', {
        tacticTypeId: val
      }).then(() => {
        if (this.tacticsList.length) {
          if (this.newTacticId) { // 新建的战术板
            this.tacticId = this.newTacticId
            this.newTacticId = ''
            return
          }
          if (this.tacticId) { // 原来有值
            this.tacticId = this.tacticsList[0].key
          }
        } else {
          this.tacticId = ''
          this.showTabs = false
        }
      })
    },
    tacticId (val, oldVal) {
      if (!this.tacticId) {
        return
      }
      if (val !== oldVal) {
        this.getTacticInfo()
      }
    },
    tacticsInfo (val, oldVal) {
      if (val && !this.showTabs && (val.type || val.frames)) {
        // this.showTabs = true
      }
    }
  },
  mounted () {
    this.getSportsList()
  },
  data () {
    return {
      showTabs: 0,
      boardUrl: [
        {
          url: '/static/images/board/board_01.jpg',
          type: 'full',
          checked: 1
        },
        {
          url: '/static/images/board/board_02.jpg',
          type: 'half-up',
          checked: 0
        },
        {
          url: '/static/images/board/board_03.jpg',
          type: 'half-down',
          checked: 0
        }
      ],
      rules: {},
      form: {
        sportType: 56001,
        tacticTypeId: '',
        tacticName: '',
        type: 1
      },
      sportList: [],
      tacticsTypeList: [],
      dialogVisible: false,
      activeTab: 'edit',
      sportType: '',
      tacticTypeId: '',
      tacticId: '',
      newTacticId: ''
    }
  },
  methods: {
    handleClick () {
    },
    // 新建战术板
    save () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let type = 'full'
          if (this.form.type === 2) {
            type = 'half-up'
          } else if (this.form.type === 3) {
            type = 'half-down'
          }
          let content = JSON.stringify({type: type})
          api.save({
            sportTypeId: this.form.sportType,
            tacticTypeId: this.form.tacticTypeId,
            tacticName: this.form.tacticName,
            content: content
          }).then((res) => {
            this.sportType = this.form.sportType
            this.tacticTypeId = this.form.tacticTypeId
            this.dialogVisible = false
            this.clearValid()
            this.newTacticId = res.data
          })
        } else {
          return false
        }
      })
    },
    checkThis (i) {
      this.boardUrl.forEach((item) => {
        item.checked = false
      })
      this.boardUrl[i].checked = true
      this.form.type = i + 1
    },
    clearValid () {
      this.form = {
        sportType: '',
        tacticTypeId: '',
        tacticName: '',
        type: 1
      }
      // 清除验证提示
      this.$refs.form && this.$refs.form.resetFields()
    },
    getSportsList () {
      api.sportTypeList().then((res) => {
        this.sportList = res.data
        if (this.sportList.length) {
          this.form.sportType = this.sportList[0].fieldValue
        }
        this.$store.dispatch('tactics_type_list', {
          fieldValue: res.data[0].fieldValue
        })
      })
    },
    deleteBorad () {
      this.$confirm('确认删除该战术板吗？删除后不可恢复', '温馨提示', {
        type: 'warning'
      }).then(() => {
        api.delete({
          tacticId: this.tacticId
        }).then((res) => {
          this.$store.dispatch('tactics_list', {
            tacticTypeId: this.tacticTypeId
          }).then(() => {
            if (this.tacticsList && this.tacticsList.length) {
              this.tacticId = this.tacticsList[0].key
            } else {
              this.showTabs = false
            }
          })
        })
      })
    },
    getTacticInfo () {
      this.$store.dispatch('tactics_info', {
        tacticId: this.tacticId
      })
      if (!this.showTabs) {
        this.showTabs = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.no-margin{
  margin:0;
}
.board-active{
  border: 2px solid #33c378;
  margin-top: 0!important;
}
</style>
<style lang="scss">
.terrain{
  .el-form-item__content{
    margin: 50px 0 0 0!important;
    img{
      cursor: pointer;
      margin-top: 2px;
    }
  }
}
</style>
<style>
.el-tabs__header{
  margin-bottom:30px;
}
</style>